/****************
 *@description: 聊天敏感词 详情 聊天内容上下文
 *@author: Xhd
 *@API: 陈浩天
 *@date: 2024-04-15 10:36:00
 *@version: V1.0.0
*************************************************************************/

import React, { Component } from 'react';
import { Button, Modal } from "antd";
import TheQueryForm from '@/components/TheQueryForm';
import TheTable from '@/components/TheTable';
import ThePagination from '@/components/ThePagination';
import TheImage from "@/components/TheImage";
import VideoPlayer from "@/components/VideoPlayer"
import WaterMark from "@/components/WaterMark";
import store from "@/store/store";
import moment from 'moment';
import GoBack from '@/components/TheGoBack';
import { apiGetOneMessageHistory } from "@/request/app/sensitiveWords";

class ChatContent extends Component {
  constructor(props) {
    super(props)
    this.queryFormRef = React.createRef()
    this.state = {
      data: props.match.params,
      content: store.getState().user.userName + "\n" + moment(new Date()).format("YYYY年MM月DD日 HH:mm:ss"),
      searchOption: [{ field: "time", label: "查询时间", placeholder: "", required: false, rules: [], type: "RangePicker", showTime: true, otherConfig: { defaultValue: [moment(new Date()), moment(new Date())] } },],
      columns: [
        {
          title: "IM消息内容",
          dataIndex: "content",
          key: "content",
          render: (text, record) => {
            return <div style={{ width: '100%', whiteSpace: "normal" }}>
              {this.chatContentDispose(record)}
            </div>
          }
        },
        {
          title: "发送方ID",
          dataIndex: "fromUid",
          key: "fromUid",
          render: (text) => {
            return <Button type='link' onClick={() => this.props.history.push(`/users/details/${text}`)} >{text}</Button>
          }
        },
        {
          title: "接收方ID",
          dataIndex: "toUid",
          key: "toUid",
          render: (text) => {
            return <Button type='link' onClick={() => this.props.history.push(`/users/details/${text}`)} >{text}</Button>
          }
        },
        {
          title: '发送时间',
          dataIndex: 'sendTime',
          key: 'sendTime',
          render: (text) => {
            return moment(new Date(parseInt(text))).format("YYYY-MM-DD HH:mm:ss")
          }
        },
      ],
      dataSource: [],
      pageData: { page: 1, pageSize: 10 },
      total: 0,
      queryForm: { startTime: moment(new Date()).valueOf(), endTime: moment(new Date()).valueOf() },
      // queryForm: {},
      isvideoModalVisible: false,
      videoAddress: ""
    }
  }

  componentDidMount() {
    this.getData()
  }

  getData = async () => {
    const { queryForm, pageData, data } = this.state
    await apiGetOneMessageHistory({ ...queryForm, ...pageData, sendId: data.reporterId, receiveId: data.reporterPersonId }).then((res) => {
    // await apiGetOneMessageHistory({ ...queryForm, ...pageData, sendId: 88963479, receiveId: 88977746 }).then((res) => {
      if (res.code === 0) {
        this.setState({
          dataSource: res.data.data,
          total: res.data.totalCount,
        })
      }
    })
  }

  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: { page: pageNo, pageSize }
    }, () => {
      this.getData()
    })
  }

  onFormSearch = (values) => {
    if (values && values.time) {
      this.setState({
        queryForm: { startTime: moment(values.time[0]).valueOf(), endTime: moment(values.time[1]).valueOf() }
      })
    } else {
      this.setState({
        queryForm: { startTime: moment(new Date()).valueOf(), endTime: moment(new Date()).valueOf() },
      })
    }
    this.pageChange(1, 10)
  }

  onReset = () => {
    this.state.searchOption[0].otherConfig = { defaultValue: "" }
    this.setState({
      queryForm: { }
    }, () => {
      this.pageChange(1, 10)
    })
  }

  // 聊天内容数据处理
  chatContentDispose = (value) => {
    let b = "^\".*\"$"
    let message = value.content.messageBody
    let a = value.content.messageBody.match(b)
    let data = JSON.parse(message)
    if (a) {
      message = value.content.messageBody.replace(/\"\\\"/g, '');
      data = JSON.parse(JSON.parse(message))
    }
    let text = ""
    switch (data.messageType) {
      case "1":
        text = data.content
        break;
      case "2":
        // 图片
        // text = JSON.parse(data.content).url
        text = <TheImage src={JSON.parse(data.content).url} width={80} height={80} ></TheImage>
        break;
      case "3":
        // 视频
        text = <Button onClick={() => this.setState({ isvideoModalVisible: true, videoAddress: JSON.parse(data.content).url })}>{JSON.parse(data.content).url}</Button>
        break;
      case "4":
        text = "[红包]"
        break;
      case "5":
        text = "[打开红包]"
        break;
      case "7":
        text = "[转账]"
        break;
      case "8":
        text = "[转账]已接收"
        break;
      case "10":
        text = "[转账]已退回"
        break;
      case "11":
        text = "[语音]"
        break;
      case "12":
        text = "[撤回]"
        break;
      case "15":
        text = "[礼物]"
        break;
      default:
        // console.log(data.content, data.messageType);
        break;
    }
    return text
  }

  render() {
    const { content, searchOption, columns, dataSource, pageData, total, isvideoModalVisible, videoAddress } = this.state
    return (<div className='p-layout-box'>
      <WaterMark content={content} rotate={-20} width={300} height={200} maxWidth={200} lineHeight={40} >
        <GoBack history={this.props.history} title='敏感词检测'></GoBack>
        <div style={{ width: "100%", height: '15px' }}></div>
        <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={true} option={searchOption} onReset={() => this.onReset()} onGetValues={(values) => this.onFormSearch(values)} />
        <TheTable scroll={{ x: 'max-content', y: '63vh' }} columns={columns} dataSource={dataSource} />
        <ThePagination pageNo={pageData.page} pageSize={pageData.pageSize} total={total} pageChange={this.pageChange} />
      </WaterMark>
      <Modal open={isvideoModalVisible} destroyOnClose footer={null} onCancel={() => this.setState({ isvideoModalVisible: false })}>
        <div style={{marginTop:'20px'}}>
          <VideoPlayer src={videoAddress} />
        </div>
      </Modal>
    </div>)
  }
}

export default ChatContent